<template>
  <div>
    <div id="map" style="width: 100%; height: 400px"></div>
    <div style="margin-top: 10px">
<!--      <el-button @click="draw('circle')">绘制圆形</el-button>-->
      <el-button type="primary" @click="draw('polygon')">绘制多边形</el-button>
<!--      <el-button @click="draw('rectangle')">绘制矩形</el-button>-->
      <el-button type="warning" @click="clearAll">清除所有</el-button>
      <el-button type="success" @click="saveFences">保存围栏</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AmapFenceDrawer',
  props: {
    dataMap:String,
  },
  data() {
    return {
      map: null,
      mouseTool: null,
      overlays: []
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      this.map = new AMap.Map('map', {
        center: [108.9398, 34.3416],
        zoom: 13,
      });
      this.mouseTool = new AMap.MouseTool(this.map);
      // 回填数据
      if(this.dataMap){
        this.overlays = JSON.parse(this.dataMap);
        if (this.overlays  == null) return;
        for (let i = 0; i < this.overlays .length; i++) {
          if(this.overlays[i]){
            var polygon = new AMap.Polygon(this.overlays [i]);
            this.map.add(polygon);
          }
        }
      }

      this.mouseTool.on('draw', e => {
        this.overlays.push(e.obj);
        this.enableEdit(e.obj);
      });
    },
    initMap1() {
      this.map = new AMap.Map('map', {
        center: [108.9398, 34.3416],
        zoom: 13,
      });
      this.mouseTool = new AMap.MouseTool(this.map);

      this.mouseTool.on('draw', e => {
        this.overlays.push(e.obj);
        this.enableEdit(e.obj);
      });
    },

    draw(type) {
      const options = {
        strokeColor: '#FF33FF',
        strokeWeight: 3,
        fillColor: '#1791fc',
        fillOpacity: 0.35
      };

      if (type === 'circle') this.mouseTool.circle(options);
      else if (type === 'polygon') this.mouseTool.polygon(options);
      else if (type === 'rectangle') this.mouseTool.rectangle(options);
    },

    enableEdit(overlay) {
      if (overlay instanceof AMap.Circle) {
        const editor = new AMap.CircleEditor(this.map, overlay);
        editor.open();
      } else if (overlay instanceof AMap.Polygon) {
        const editor = new AMap.PolygonEditor(this.map, overlay);
        editor.open();
      } else if (overlay instanceof AMap.Rectangle) {
        const editor = new AMap.RectangleEditor(this.map, overlay);
        editor.open();
      }
    },

    clearAll() {
      this.overlays.forEach(o => this.map.remove(o));
      this.overlays = [];
      this.initMap1();
    },

    saveFences() {
      const data = this.overlays.map(o => {
        if (o instanceof AMap.Circle) {
          return {
            type: 'circle',
            center: o.getCenter(),
            radius: o.getRadius()
          };
        } else if (o instanceof AMap.Polygon) {
          return {
            type: 'polygon',
            path: o.getPath()
          };
        } else if (o instanceof AMap.Rectangle) {
          const bounds = o.getBounds();
          return {
            type: 'rectangle',
            bounds: {
              southwest: bounds.getSouthWest(),
              northeast: bounds.getNorthEast()
            }
          };
        }
        return null;
      });
      console.log('围栏数据：', JSON.stringify(data));
      // 示例：提交到后端
      this.$emit("saveData",JSON.stringify(data))
      // this.$http.post('/api/fences/save', data)
    }
  }
};
</script>

<style scoped>
button {
  margin-right: 10px;
  padding: 6px 12px;
}
</style>
